<template>
    <div>
    <el-container>
      <el-header style="height : 10%">
        <el-image
          style="float:left;width: 20%; height: 10%"
          :src="url"
        />
        <div style="margin-top: 2%;margin-right:5%">
          <el-button type="primary" plain>首页</el-button>
          <el-input v-model="input" size="medium" style="width:30%" placeholder="请输入内容" suffix-icon="el-icon-search" />
          <el-button type="primary" plain>馆藏检索</el-button>
          <el-button type="success" plain>登录</el-button>
        </div>
      </el-header>
     <el-main>
        <div style="margin-top:0%">
          <el-image
            style="width:100%"
            :src="imgurl"
          />
        </div>
        <div style="background-color:white;margin-left:15%;margin-right:15%;">
          <div>
          <el-table v-if="type=='notice'" v-loading="listLoading" :data="ListTableData"   style="width: 100%">
            <el-table-column
                align="left">
                <template slot="header" slot-scope="scope">
                  <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>公告通知</el-breadcrumb-item>
                  </el-breadcrumb>
                </template>
                <template slot-scope="scope">
                  <router-link :to="{path:'/acticleindex',query:{noticeId:scope.row.noticeId,acticleType:'notice'}}" >
                <span> >>{{ scope.row.noticeName }}</span>
                  </router-link>
              </template>
              </el-table-column>
            <el-table-column align="center" >
              <template slot-scope="scope">
                <span>{{ scope.row.createDate }}</span>
              </template>
            </el-table-column>
          </el-table>

          <el-table v-if="type=='donation'" v-loading="listLoading" :data="ListTableData"   style="width: 100%">
            <el-table-column
                align="left">
                <template slot="header" slot-scope="scope">
                  <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>图书捐赠</el-breadcrumb-item>
                  </el-breadcrumb>
                </template>
                <template slot-scope="scope">
                  <router-link :to="{path:'/acticleindex',query:{noticeId:scope.row.noticeId,acticleType:'donation'}}" >
                <span> >>{{ scope.row.noticeName }}</span>
                  </router-link>
              </template>
              </el-table-column>
            <el-table-column align="center" >
              <template slot-scope="scope">
                <span>{{ scope.row.createDate }}</span>
              </template>
            </el-table-column>
          </el-table>

          <el-table v-if="type=='dynamic'" v-loading="listLoading" :data="ListTableData"   style="width: 100%">
            <el-table-column
                align="left">
                <template slot="header" slot-scope="scope">
                  <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>云图动态</el-breadcrumb-item>
                  </el-breadcrumb>
                </template>
                <template slot-scope="scope">
                  <router-link :to="{path:'/acticleindex',query:{noticeId:scope.row.noticeId,acticleType:'dynamic'}}" >
                <span> >>{{ scope.row.noticeName }}</span>
                  </router-link>
              </template>
              </el-table-column>
            <el-table-column align="center" >
              <template slot-scope="scope">
                <span>{{ scope.row.createDate }}</span>
              </template>
            </el-table-column>
          </el-table>

          <el-table v-if="type=='guide'" v-loading="listLoading" :data="ListTableData"   style="width: 100%">
            <el-table-column
                align="left">
                <template slot="header" slot-scope="scope">
                  <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>读者指南</el-breadcrumb-item>
                  </el-breadcrumb>
                </template>
                <template slot-scope="scope">
                  <router-link :to="{path:'/acticleindex',query:{guideId:scope.row.guideId,acticleType:'guide'}}" >
                <span> >>{{ scope.row.guideName }}</span>
                </router-link>
              </template>
              </el-table-column>
            <el-table-column align="center" >
              <template slot-scope="scope">
                <span>{{ scope.row.createDate }}</span>
              </template>
            </el-table-column>
          </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" @pagination="queryNotice" />
          </div>
        </div>
        <div style="background-color:white; height:65px; padding:15px">
          <el-tag style="margin-right:10px;height:35px">相关网站</el-tag>
          <el-dropdown>
            <el-button type="primary" style="height:35px">
              文化和旅游部直属单位<i class="el-icon-arrow-down el-icon--right" />
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item> <el-link :underline="false" href="https://www.dpm.org.cn/Home.html" target="_blank">故宫博物院</el-link> </el-dropdown-item>
              <el-dropdown-item><el-link :underline="false" href="http://www.ccmg.cn/" target="_blank">中华文化传媒集团</el-link></el-dropdown-item>
              <el-dropdown-item><el-link :underline="false" href="http://www.zgysyjy.org.cn/" target="_blank">中国艺术研究院</el-link></el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-dropdown>
            <el-button type="primary" style="height:35px">
              省级公共图书馆<i class="el-icon-arrow-down el-icon--right" />
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item> <el-link :underline="false" href="http://www.gll-gx.org.cn/" target="_blank">桂林图书馆</el-link> </el-dropdown-item>
              <el-dropdown-item><el-link :underline="false" href="http://www.qhlib.org/" target="_blank">青海省图书馆</el-link></el-dropdown-item>
              <el-dropdown-item><el-link :underline="false" href="http://www.ucdrs.net/area/sxlib" target="_blank">陕西省图书馆</el-link></el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-dropdown>
            <el-button type="primary" style="height:35px">
              其他<i class="el-icon-arrow-down el-icon--right" />
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item> <el-link :underline="false" href="http://www.shanxi.gov.cn/" target="_blank">山西省人民政府</el-link> </el-dropdown-item>
              <el-dropdown-item><el-link :underline="false" href="http://wlt.shanxi.gov.cn/" target="_blank">山西省文化和旅游厅</el-link></el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
     </el-main>
     <el-footer>Footer</el-footer>
    </el-container>
      
    </div>
</template>

<script>
import IN from '@/api/index.js';
import Pagination from '@/components/Pagination'; // Secondary package based on el-pagination
export default {
  components: { Pagination },
  data() {
    return {
      type:"",
      acticleName: "",
      url: require('../../assets/1.png'),
      imgurl: require('../../assets/2.jpg'),
      ListTableData: [],
      pageNum: 1,
      pageSize: 20,
      total: 0
    };
  },
  created() {
    if (this.$route.query.type == 'notice') {
      this.type = this.$route.query.type
      this.queryNotice();
    }
    if (this.$route.query.type == 'dynamic') {
      this.type = this.$route.query.type
      this.queryDynamic();
    }
    if (this.$route.query.type == 'donation') {
      this.type = this.$route.query.type
      this.queryDonation();
    }
    if (this.$route.query.type == 'guide') {
      this.type = this.$route.query.type
      this.queryGuide();
    }
  },
  computed: {},
  methods: {
    queryGuide(){
    //queryObj 是我们传往后台的对象参数
      var queryObj = {
        pageNum: this.pageNum,
        pageSize: this.pageSize
      };
      IN.getGuidePage(queryObj).then(response => {
        console.log('陈宇荷的第一个方法获取的返回值：', response);
        this.ListTableData = response.data.resultBody.rows
        this.total = response.data.resultBody.total
      })
    },
    //公告通知
    queryNotice() {
      //queryObj 是我们传往后台的对象参数
      var queryObj = {
        noticeType: 1,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      };
      IN.getNoticeList(queryObj).then(response => {
        console.log('陈宇荷的第一个方法获取的返回值：', response);
        this.ListTableData = response.data.resultBody.rows
        this.total = response.data.resultBody.total
      })
    },
    //图书动态
    queryDynamic() {
      //queryObj 是我们传往后台的对象参数
      var queryObj = {
        noticeType: 2,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      };
      IN.getNoticeList(queryObj).then(response => {
        console.log('陈宇荷的第一个方法获取的返回值：', response);
        this.ListTableData = response.data.resultBody.rows
        this.total = response.data.resultBody.total
      })
    },
    //图书捐赠
    queryDonation() {
      //queryObj 是我们传往后台的对象参数
      var queryObj = {
        noticeType: 3,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      };
      IN.getNoticeList(queryObj).then(response => {
        console.log('陈宇荷的第一个方法获取的返回值：', response);
        this.ListTableData = response.data.resultBody.rows
        this.total = response.data.resultBody.total
      })
    },
  }
}
</script>
<style lang='scss' scoped>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: right;
  line-height: 80px;
}
.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  padding: 0%;

  // line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.el-dropdown {
  vertical-align: top;
}
.el-dropdown + .el-dropdown {
  margin-left: 15px;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>